import {Table,Button,Form,Input,Select,DatePicker,Modal, Checkbox,Divider,message,} from "antd";
import React from "react";
import {
  DownloadOutlined,
  CopyOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import MyAxios from "../service/myAxios";

const { confirm } = Modal;
const { Option } = Select;
const columns = [
  {
    title: "序号",
    dataIndex: "id",
  },
  {
    title: "备份文件名称",
    dataIndex: "name",
  },
  {
    title: "文件路径",
    dataIndex: "path",
  },
  {
    title: "备份类型",
    dataIndex: "type",
    render: (type) => {
      if (type == "0") {
        return "展示全部";
      }
      if (type == "1") {
        return "即时备份";
      }
      if (type == "2") {
        return "按日备份";
      }
      if (type == "3") {
        return "按周备份";
      }
      if (type == "4") {
        return "按月备份";
      }
    },
  },
  {
    title: "操作人",
    dataIndex: "operator",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "状态",
    dataIndex: "state",
    render: (state) => {
      if (state === 1) {
        return "已备份";
      }
      if (state === 2) {
        return "备份失败";
      }
      if (state === 3) {
        return "备份中";
      }
    },
  },
];
const CheckboxGroup = Checkbox.Group;
const plainOptions = [];

class DBlist extends React.Component {
  state = {
    selectedRowKeys: [],
    loading: false,
    id: 1,
    name: ``,
    path: ``,
    type: "0",
    operator: ``,
    createTime: ``,
    state: 1,
    pageNum: 1,
    pageSize: 7,
    total: 20,
    visible: false,
    data: [],
    checkedList: [],
    indeterminate: true,
    checkAll: false,
  };
  constructor(props) {
    super(props);
  }
  //初始化数据
  componentWillMount() {
    MyAxios.get("db/queryTables").then((data) => {
      if (data.code === 1001) {
        data.data.map((name) => {
          plainOptions.push(name);
        });
      }
    });
    const recordVO = {
      pageNum: this.state.pageNum,
      pageSize: this.state.pageSize,
      name: this.state.name,
      type: this.state.type,
      createTime: this.state.createTime,
    };
    this.searchData(recordVO);
  }

  searchData = (recordVO) => {
    MyAxios.get("db/searchRecord", recordVO).then((data) => {
      if (data.code === 1001) {

        const dblist = data.data.data.map((d) => {
          d.key = d.id;
          return d;
        });
        this.setState({ data: dblist, total: data.data.total });
      }
    });
  };

  onSearch = () => {
    const recordVO = {
      pageNum: this.state.pageNum,
      pageSize: this.state.pageSize,
      name: this.state.name,
      type: this.state.type,
      createTime: this.state.createTime,
    };
        // 每次搜索重新设置页面
    this.setState({
      pageNum: 1,
    });
    this.searchData(recordVO);
  };
  backup = () => {
    console.log(this.state.checkedList);
    MyAxios.post("db/databasebackup", this.state.checkedList).then((data) => {
      if (data.code === 6001) {
        message.success(data.message);
      }
      this.onSearch();
    });
    this.hideModal();
  };

  download = () => {
    if (this.state.selectedRowKeys.length ===1) {
      const dbList = this.state.selectedRowKeys;
      MyAxios.download("db/download", dbList, "数据库文件.zip");
    } else{
      message.warn("请选择要下载的单个文件");
    }
  };

  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  };

  showModal = () => {  this.setState({ visible: true });};

  onChange = (list) => {
    this.setState({
      checkedList: list,
      indeterminate: !!list.length && list.length < plainOptions.length,
      checkAll: list.length === plainOptions.length,
    });
  };

  onCheckAllChange = (e) => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };

  removeFile = () => {
    if (this.state.selectedRowKeys !== 0) {
      confirm({
        cancelText: "取消",
        okText: "删除",
        title: "是否删除数据库文件？",
        content: "文件将被移除",
        onCancel() {
          console.log("取消操作");
        },
        onOk: () => {
          const dbList = this.state.selectedRowKeys;
          MyAxios.delete("db/removeFile", dbList).then((data) => {
            if (data.code === 3001) {
              message.success(data.message);
            }
            const recordVO = {
              pageNum: this.state.pageNum,
              pageSize: this.state.pageSize,
              name: this.state.name,
              type: this.state.type,
              createTime: this.state.createTime,
            };
            this.searchData(recordVO);
          });
        },
      });
    } else {
      message.warn("请选择要删除的文件");
    }
  };

  hideModal = () => {
    this.setState({ visible: false });
  };

  onChange(date, dateString) {
    console.log(date, dateString);
  }

/**
 * 
 * @returns 还原数据库
 */
rollBack=()=>{
  if (this.state.selectedRowKeys.length ===1) {
    const dbList = {dbid : this.state.selectedRowKeys[0]};
    MyAxios.get("db/rollBack", dbList)
    .then((data)=>{
      if(data.code===4001){
        message.success(data.message)
      }
      else{
          message.error(data.message)
      }
    });
  } else{
    message.warn("请还原的单个数据库文件");
  }
}

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    return (
      <div className="DBlist">
        <Form layout={"inline"}>
          <Form.Item label="文件名">
            <Input
              value={this.state.name}
              placeholder="请输入"
              onChange={(e) => {
                const val = e.target.value;
                this.setState({
                  name: val,
                });
              }}
            />
          </Form.Item>
          <Form.Item label="备份类型">
            <Select
              placeholder="请选择"
              style={{ width: 120 }}
              value={this.state.type}
              onChange={(value) => {
                const val = value;
                console.log(val);
                this.setState({
                  type: val,
                });
              }}
            >
              <Option key={0}>展示全部</Option>
              <Option value={1} key={1}>
                即时备份
              </Option>
              <Option value={2} key={2}>
                按日备份
              </Option>
              <Option value={3} key={3}>
                按周备份
              </Option>
              <Option value={4} key={4}>
                按月备份
              </Option>
            </Select>
          </Form.Item>
          <Form.Item label="创建日期">
            <DatePicker
              placeholder="请选择日期"
              onChange={(value) => {
                const val = value;
                this.setState({
                  createTime: val,
                });
              }}
            />
          </Form.Item>
          <Form.Item>
            <Button onClick={this.onSearch} type="primary">
              检索
            </Button>
          </Form.Item>
        </Form>
        <div style={{ marginBottom: 5 }}></div>
        <Form layout={"inline"} style={{ marginBottom: 5 }}>
          <Form.Item>
            <Button
              icon={<CopyOutlined />}
              size={"small"}
              onClick={this.showModal}
            >
              备份数据文件到服务器
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              icon={<DownloadOutlined />}
              onClick={this.download}
              size={"small"}
            >
              下载
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              icon={<DownloadOutlined />}
              onClick={this.rollBack}
              size={"small"}
            >
              还原数据库
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              size={"small"}
              onClick={this.removeFile}
              icon={<DeleteOutlined />}
            >
              删除
            </Button>
          </Form.Item>
        </Form>
        <div>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={this.state.data}
            pagination={{
              defaultCurrent: 1,
              current: this.state.pageNum,
              total: this.state.total,
              pageSize: this.state.pageSize,
              showTotal: (total) => {
                return `总记录数 ${total}条 `;
              },
              onChange: (page, pageSize) => {
                //把当前页数据保存下来作为参数
                this.setState({
                  pageSize: pageSize,
                  pageNum: page,
                });
                const recordVO = {
                  pageNum: page,
                  pageSize: pageSize,
                  name: this.state.name,
                  type: this.state.type,
                  createTime: this.state.createTime,
                };
                this.searchData(recordVO);
              },
            }}
          />
          <Modal
            title="数据库文件备份"
            visible={this.state.visible}
            onOk={this.backup}
            onCancel={this.hideModal}
            cancelText="取消"
            okText="备份"
          >
            <Checkbox
              indeterminate={this.state.indeterminate}
              onChange={this.onCheckAllChange}
              checked={this.state.checkAll}
            >
              备份整个数据库
            </Checkbox>
            <Divider />
            <CheckboxGroup
              options={plainOptions}
              value={this.state.checkedList}
              onChange={this.onChange}
            />
          </Modal>
        </div>
      </div>
    );
  }
}

export default DBlist;
